//厦门大学计算机专业 | 前华为工程师
//专注《零基础学编程系列》  http://lblbc.cn/blog
//包含：Java | 安卓 | 前端 | Flutter | iOS | 小程序 | 鸿蒙
//公众号：蓝不蓝编程
<template>
    <view class="page-wrapper">
        <view class="addr-info" @tap="gotoSelectAddr" v-if="addr != null">
            <image class="location-img" src="/static/images/location.png"></image>
            <view class="receiver-info">
                <view class="receiver-name">{{ addr.name }}</view>
                <view class="receiver-addr">{{ addr.address }}</view>
            </view>
            <image class="right-arrow" src="/static/images/right_arrow.png"></image>
        </view>
        <view class="addr-info addr-text" @tap="gotoSelectAddr" v-else>
            <view>+ 添加收货地址</view>
        </view>

        <view class="delivery-info">
            <view class="delivery_text">配送</view>
            <view class="package-info">
                <view class="package-sender">顺丰速运</view>
                <view class="package-time">1个包裹，预计明天送达</view>
            </view>
            <image class="right-arrow" src="/static/images/right_arrow.png"></image>
        </view>

        <view class="cost-info-rows">
            <view class="cost-info-row">
                <view class="cost-info-left">商品金额</view>
                <view class="cost-info-right">{{ costSum }}</view>
            </view>
            <view class="cost-info-row">
                <view class="cost-info-left">总运费</view>
                <view class="cost-info-right">满XX元 免邮</view>
            </view>
            <view class="cost-info-row">
                <view class="cost-info-left">优惠券</view>
                <view class="cost-info-right">无可用券</view>
            </view>
        </view>

        <view class="bottom-wrapper">
            <view class="bottom-split"></view>
            <view class="bottom-btns">
                <view class="cost-row" :data-id="id">
                    <view class="cost-text">实付款</view>
                    <view class="cost">{{ costSum }}</view>
                </view>
                <view :class="'buy-btn ' + (addr != null ? 'btn-enabled' : 'btn-disabled')" @tap="createOrder">提交订单</view>
            </view>
        </view>
    </view>
</template>

<script>
import { queryByCartItemIds, queryDefaultAddress, createOrderFromCart } from '@/common/api'
export default {
    data() {
        return {
            cartList: [],
            addr: null,
            costSum: 0,
            id: ''
        };
    },
    onLoad: function (option) {
        this.queryCart(option.ids);
        this.queryDefaultAddr();
    },
    methods: {
        queryCart(cartIds) {
			queryByCartItemIds(cartIds).then(resp => {
				if (!resp.data.code) {
					this.cartList = resp.data.data
					this.calcSum(resp.data.data);
				}
			})
        },

        calcSum(orderList) {
            var sum = 0;

            if (orderList != null && typeof orderList != 'undefined') {
                orderList.forEach((elem, index) => {
                    sum += elem.quantity * elem.price;
                });
            }

            this.costSum = '￥' + sum / 100
        },

        queryDefaultAddr() {
			queryDefaultAddress().then(resp => {
				if (!resp.data.code) {
					this.addr = resp.data.data
				}
			})
        },

        createOrder(e) {
            let cartList = this.cartList;
            let cartIds = [];

            if (cartList != null && typeof cartList != 'undefined') {
                cartList.forEach((elem, index) => {
                    cartIds.push(elem.id);
                });
                var params = {
                    cartIdList: cartIds,
                    addressId: this.addr.id
                };
                createOrderFromCart(params).then(resp => {
                	if (!resp.data.code) {
                		this.gotoOrderDetail(resp.data.data.orderId);
                	}
                })
            }
        },

        gotoSelectAddr() {
            if (this.addr != null) {
                uni.navigateTo({
                    url: '/pages/addr/addr-select/addr-select?id=' + this.addr.id
                });
            } else {
                uni.navigateTo({
                    url: '/pages/addr/addr-select/addr-select'
                });
            }
        },

        gotoOrderDetail(orderId) {
            uni.navigateTo({
                url: '/pages/order/order-detail/order-detail?id=' + orderId
            });
        }
    }
};
</script>
<style>
.page-wrapper {
    margin: 0;
    font-size: 28rpx;
    line-height: 1.5;
    color: #333;
    background-color: #f4f4f4;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    -webkit-tap-highlight-color: transparent;
    min-height: 2000rpx;
}

.addr-info {
    background-color: #fff;
    border-radius: 10rpx;
    margin-top: 40rpx;
    margin-left: 20rpx;
    margin-right: 20rpx;
    padding-left: 20rpx;
    padding-right: 20rpx;
    padding-top: 20rpx;
    padding-bottom: 20rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.addr-text {
    font-size: 35rpx;
    margin-left: 20rpx;
}

.location-img {
    width: 30rpx;
    height: 30rpx;
}

.right-arrow {
    height: 40rpx;
    width: 40rpx;
}

.receiver-info {
    margin-left: 20rpx;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.goods-info {
    background-color: #fff;
    border-radius: 10rpx;
    margin-top: 40rpx;
    margin-left: 20rpx;
    margin-right: 20rpx;
    padding-left: 20rpx;
    padding-right: 20rpx;
    padding-top: 20rpx;
    padding-bottom: 20rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.goods-img-wrapper {
    flex: 1;
}

.goods-img {
    width: 200rpx;
    height: 200rpx;
}

.delivery-info {
    background-color: #fff;
    border-radius: 10rpx;
    margin-top: 40rpx;
    margin-left: 20rpx;
    margin-right: 20rpx;
    padding-left: 20rpx;
    padding-right: 20rpx;
    padding-top: 20rpx;
    padding-bottom: 20rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.delivery_text {
    margin-left: 20rpx;
    color: #595d65;
}

.package-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    margin-left: 40rpx;
}

.package-sender {
    color: #333333;
}

.package-time {
    color: #717171;
}

.cost-info-rows {
    background-color: #fff;
    border-radius: 10rpx;
    margin-top: 40rpx;
    margin-left: 20rpx;
    margin-right: 20rpx;
    padding-left: 20rpx;
    padding-right: 20rpx;
    padding-top: 20rpx;
    padding-bottom: 20rpx;
    display: flex;
    flex-direction: column;
}

.cost-info-row {
    display: flex;
    flex-direction: row;
    margin-top: 20rpx;
}

.cost-info-left {
    color: #595d65;
    flex: 1;
}

.cost-info-right {
    color: #222222;
}

.bottom-wrapper {
    position: fixed;
    bottom: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding-bottom: 10rpx;
    background-color: white;
}

.bottom-split {
    width: 100%;
    height: 1rpx;
    background-color: #ebebeb;
    margin-bottom: 20rpx;
}

.bottom-btns {
    width: 100%;
    display: flex;
    flex-direction: row;
    margin-bottom: 20rpx;
    align-items: center;
}

.cost-row {
    display: flex;
    flex-direction: row;
    flex: 1;
    margin-left: 50rpx;
    font-size: 40rpx;
    align-items: center;
}

.cost-text {
    font-size: 30rpx;
}

.sum-text {
    margin-left: 40rpx;
}

.cost {
    margin-left: 20rpx;
    color: #ef3965;
}

.buy-btn {
    flex: 1;
    font-size: 35rpx;
    color: #fff;
    border-radius: 2rem;
    padding: 10rpx;
    display: flex;
    justify-content: center;
    margin-right: 50rpx;
}

.btn-enabled {
    background-color: #ef3965;
}

.btn-disabled {
    background-color: #cbccd2;
}
</style>
